<!--视频资料-->
<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline">
          <a-form-item label="视频名称">
            <a-input style="width: 150px" v-model="searchParams.videoName"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          </a-form-item>

          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="file" :loading="downloadLoading">导入</a-button>-->
          <!--</a-form-item>-->
          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="download" @click="handleDownload" :loading="downloadLoading">导出</a-button>-->
          <!--</a-form-item>-->
          <a-form-item>
            <!--新增-->
            <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
          </a-form-item>
        </a-form>
      </a-card>
      <!--列表-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="getTableData"
      >
        <template slot="type" slot-scope="text,record">
          <a-tag color="green" v-if="text == '0'">
            上架
          </a-tag>
          <a-tag color="red" v-if="text == '1'">
            下架
          </a-tag>
        </template>

        <span slot="action" slot-scope="text, record">
          <template>
            <a v-if="record.type == 0" href="javascript:;" @click="updateForType(record.id,1)">下架</a>
             <a v-else href="javascript:;" @click="updateForType(record.id,0)">上架</a>
            <a-divider type="vertical"/>
            <a @click="handleUpdate(record)" href="javascript:;">编辑</a>
            <a-divider type="vertical"/>
            <a href="javascript:;" @click="showConfirm(record)">删除</a>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <VideoPopup :mdl="mdl" @handleSearch="getTableData"></VideoPopup>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment';
  import VideoPopup from './videoPopup'
  import {studyvideoquery,studyvideodelete,studyvideoupdateForType} from '@/api/invoice'
  export default {
    components: {
      VideoPopup
    },
    data() {
      return {

        /*   -------搜索框--------*/
        searchParams: {
          videoName:''
        },

        /*   -------分页--------*/
        pagination: this.$defaultSettings.pagination ,

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible: false,
          title: '',
          formData: {
            id: '',
            infoId: '',
            pageRank: '',
            pageViews: '',
            type: '',
            uploadTime: "",
            videoName: "",
            videoInfo: "",
            videoIntegral: "",
            videoFileName:''
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          },
          formItemLayoutWithOutLabel: {
            wrapperCol: {
              xs: { span: 24, offset: 0 },
              sm: { span: 20, offset: 4 },
            },
          },
        },

        /*   -------表格--------*/
        loading: false,
        columns:[
          {
            title: '视频名称',
            dataIndex: 'videoName'
          },
          {
            title: '上传时间',
            dataIndex: 'uploadTime',
          },
          {
            title: '浏览量',
            dataIndex: 'pageViews'
          },
          {
            title: '积分',
            dataIndex: 'videoIntegral'
          },
          {
            title: '学时',
            dataIndex: 'period'
          },
          {
            title: '上下架状态',
            dataIndex: 'type',
            scopedSlots: {customRender: 'type'}
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data:[],

        // 下载
        downloadLoading: false,
      }
    },
    inject: ['upShow'],
    filters: {

    },
    created() {
      this.getTableData(this.pagination)
    },
    computed: {

    },
    methods: {
      moment,
//     查询列表
      getTableData(pagination) {
        if(pagination!=undefined && pagination!='' && pagination!=null) {
            this.pagination = pagination
          }
        this.loading = true
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          bgTm:'',
          endTm: '',
          data: {
            id: '',
            infoId: '',
            pageRank: '',
            pageViews: '',
            type: '',
            uploadTime: "",
            videoName: this.searchParams.videoName,
            videoInfo: "",
            videoIntegral: "",
            videoFileName: ""
          }
        }
        studyvideoquery(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.records
        }).
        catch(err => {
          this.loading = false
        })
      },
      setDefaults() {
        this.mdl.formData = {
          id: '',
          infoId: '',
          pageRank: '',
          pageViews: '',
          type: '',
          uploadTime: "",
          videoName: "",
          videoInfo: "",
          videoIntegral: "",
          videoFileName: ""
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
      },
      handleSearch() {
        this.pagination.current = 1
        this.getTableData()
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      handleDelete(row) {
        studyvideodelete(row.id).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '删除成功')
            this.getTableData()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      },
      showConfirm(val) {
          var that = this;
        this.$confirm({
          title: '删除视频资料',
          content: '确定删除'+val.videoName+'?',
          onOk() {
              that.handleDelete(val)
          },
          onCancel() {},
        });
      },
      //下载
      handleDownload() {
        this.downloadLoading = true
//        let param  ={

//        }
//        refundRecorDdown(param).then(res=> {
//          downloadFile(res,"退款记录","xlsx")
//          this.downloadLoading = false
//        })
      },
      //      上下架
      updateForType(id,type) {
        let parameter= {
          id: id,
          type: type//        0:去下架;1:去上架
        }
        studyvideoupdateForType(parameter).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '操作成功')
            this.getTableData()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      }
    }
  }
</script>

<style scoped>

</style>